<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ margin:0; padding:0; font-size:14px}
        #box{ width:500px; margin:100px auto}
        table,th,td{ border:1px solid #000; border-collapse:collapse}
        td,th{ width:100px; height:30px; padding:10px}
        input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
        tbody tr {text-align: center;}
        tbody tr td:first-child{text-align: center;}
        tfoot td{text-align: right;text-align: center;}
        .editBtn{ color:#666}
        .delBtn{ color:red}
        .okBtn,.cancelBtn{ display:none}

        .edit span{ display:none}
        .edit input[type="text"]{ display:inline-block}
        .edit .editBtn,.edit .delBtn{ display:none}
        .edit .okBtn,.edit .cancelBtn{ display:inline}
    </style>
</head>
<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>
    <script>
        var editBtn = document.querySelectorAll('.editBtn');
        var okBtn = document.querySelectorAll('.okBtn');
        var cancelBtn = document.querySelectorAll('.cancelBtn')
        var delBtn = document.querySelectorAll('.delBtn')
        var tbody = document.querySelector('tbody')
        var checkall = document.querySelector('#allCheck')
        var checkrad = document.querySelectorAll('.check')
        var money = document.querySelector('#money')
        tbody.onclick = function(e){
            var target = e.target || e.srcElement
            var tr = target.parentNode.parentNode
            var spans = tr.querySelectorAll('span')
            // console.log(tr)
            switch(target.className){
                case 'editBtn' :
                    tr.classList.add('edit');
                    for(var i=0;i<spans.length;i++){
                        spans[i].nextElementSibling.value = spans[i].innerHTML
                    }
                break
                case 'okBtn' :
                    tr.classList.remove('edit');
                    for(var i=0;i<spans.length;i++){
                        spans[i].innerHTML = spans[i].nextElementSibling.value
                    }
                break    
                case 'cancelBtn' :
                    tr.classList.remove('edit');
                break
                case 'delBtn' :
                    if(confirm('是否确认删除')){
                        tr.remove();
                        sum = 0
                        checkrad = document.querySelectorAll('.check')
                        for(var i=0;i<checkrad.length;i++){
                            checkrad[i].checked = false
                        }
                        checkall.checked = false;
                        money.innerHTML = sum;
                    } 
                break
            }
        }
        
        var n = 0;
        var sum = 0;
        checkall.onchange = function(){
            // console.log(checkrad)
            for(var i=0;i<checkrad.length;i++){
                // checkrad[i].checked = this.checked ? true : false
                // 当n不为4的时候，把总值赋值为0--来解决选择了1个以上的时候点击全选，出现把以前值累加的情况
                // if(n!=checkrad.length){
                //     sum = 0
                // }
                checkrad[i].checked = this.checked
                this.checked ? n = checkrad.length : n = 0
                // 如果this.checked的值为true，那么checkrad.checked的值就是true-选中-就把值累加起来，如果为false，值就为0
                // if(this.checked){
                //     var tr = checkrad[i].parentNode.parentNode
                //     var spans = tr.querySelectorAll('span')
                //     sum = sum + spans[1].innerHTML * spans[2].innerHTML
                // }else{
                //     sum = 0
                // }
            }
            money.innerHTML = resultall()
            // money.innerHTML = sum
        }

        for(var i=0;i<checkrad.length;i++){
            checkrad[i].onchange = function(){
                this.checked ? n++ : n--
                checkall.checked = checkrad.length === n
                var tr = this.parentNode.parentNode
                var spans = tr.querySelectorAll('span')
                // if(this.checked == false){
                //     sum = sum - spans[1].innerHTML * spans[2].innerHTML
                //     money.innerHTML = sum
                // }else{
                //     sum = sum + spans[1].innerHTML * spans[2].innerHTML
                //     money.innerHTML = sum
                // }
                money.innerHTML = result()
            }
        }


        function resultall(){
            var sum1 = 0
            if(checkall.checked){
                for(var i=0;i<checkrad.length;i++){
                var tr = checkrad[i].parentNode.parentNode
                var spans = tr.querySelectorAll('span')
                sum1 += spans[1].innerHTML * spans[2].innerHTML
                }
            }else{
                sum1 = 0
            }
            return sum1
        }

        function result(){
            var sum1 = 0
            for(var i=0;i<checkrad.length;i++){
                if(checkrad[i].checked){
                    var tr = checkrad[i].parentNode.parentNode
                    var spans = tr.querySelectorAll('span')
                    sum1 += spans[1].innerHTML * spans[2].innerHTML
                }
            }   
            return sum1
        }

    </script>
</body>
</html>